{"componentChunkName":"component---src-templates-blog-js","path":"/blog","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars…","fields":{"slug":"/Easy-Customizable-Star-Rating-Component-in-React/"},"frontmatter":{"date":"November 14, 2023","title":"Easy Customizable Star Rating Component in React","series":null,"description":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars that you use to rate stuff all over the internet? We will build those as a default use-case, but we will also add support for other text-based and emoji-based icons that you can use instead of little yellow stars.","tags":["web","react","component"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABuUlEQVQY02WRz08TURDH9+BBsxVp+RHeM2V3+36/160bSrddWxZMaVlLobRxoyhqNW0TbJpIUuLF+IsbNw/CjZMxHoz/AAn4p/mKxoszc5lJZuYz3zEYpTo4Iew/s4TY66c3m873b4nNRn5jo5nNKs/zEEJUdzFmENclSmX8IpWK6QrnbOIMcb6XXtyetyeTPSxLxSAMIz2g0Yjq9SAIMMZGYnSQfNGf6fZQLiccR2QcTSEYg1J8Sc1cTiXOp25+Ts0OAAwsS69JKxVUq/mlJUKIAaLGXPwIbrcXw1V7JYRbOyi/zCjRXHmOLcy6c3AMwC/T/JFMXpjmm4WFGEL8BzuxP7r1cnDj9dgc7F8fHVx7+wl0HiAb3b/Lf75yu2XcjSSiRApahnAAwNfp6bNUyuL6PGZglcVKah4kpFsoOJTOA2Dbjp+TtRJ7HKGjXXbyVLxr8fVWLIMSE4JwTq8UNbgWhFJ9pGNZ7VbrYRx/fP8hrN3r17Z2w2b7TtVj3lqRlpfp814v7nTGh4dKqb9q/3uMzl3XHQ6Hpyen1dq6Vb5N/MyTZ/U1v3C8M6y4fpQtcilWKpUr5In9BjxtZoi/jzecAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/3fcc896f07936890607bd46ef93a75e1/bc8e0/rating.png","srcSet":"/static/3fcc896f07936890607bd46ef93a75e1/8ac63/rating.png 200w,\n/static/3fcc896f07936890607bd46ef93a75e1/3891b/rating.png 400w,\n/static/3fcc896f07936890607bd46ef93a75e1/bc8e0/rating.png 800w,\n/static/3fcc896f07936890607bd46ef93a75e1/6050d/rating.png 1200w,\n/static/3fcc896f07936890607bd46ef93a75e1/00405/rating.png 1600w,\n/static/3fcc896f07936890607bd46ef93a75e1/0e6e2/rating.png 1920w","srcWebp":"/static/3fcc896f07936890607bd46ef93a75e1/ccdb5/rating.webp","srcSetWebp":"/static/3fcc896f07936890607bd46ef93a75e1/6b183/rating.webp 200w,\n/static/3fcc896f07936890607bd46ef93a75e1/fc32b/rating.webp 400w,\n/static/3fcc896f07936890607bd46ef93a75e1/ccdb5/rating.webp 800w,\n/static/3fcc896f07936890607bd46ef93a75e1/9000d/rating.webp 1200w,\n/static/3fcc896f07936890607bd46ef93a75e1/e0075/rating.webp 1600w,\n/static/3fcc896f07936890607bd46ef93a75e1/30cf3/rating.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"If you need a quick and simple solution for address search with autocomplete and geocoding this one is for you. To set up this project you…","fields":{"slug":"/Address-Search-With-React-and-Mapbox-API/"},"frontmatter":{"date":"November 09, 2023","title":"Address Search with React and Mapbox API","series":null,"description":"If you need a quick and simple solution for address search with autocomplete and geocoding this one is for you.","tags":["web","react","API"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAAB80lEQVQY0wHoARf+AEG2pj62pUTCq1rUuHbqyErJrxWhknfpx5H50IT6xH/9xIv9zob8yZP91or4zTvApzO7pjm8pTe2oDa2oAB51L+N48l83cJexrJHsaVFsKQqnJRhwbGK38aH38B9zK59zrB+07CK07d6zbFwp5N3e25FrJg3u6Q4t6EAXsKnd9evf9e2iau0mq28tMHLqLrFfZ2rkbbAi5yTjVJRm11ZpFVRj1lXmWNds3BhnWhbX5GBNMCoObWfAFm+o3XXq226pJSvuJe1vH6jr3idqnCYoom5uX6RhYlkXoNhYYhgXYphX4SAdKaDanOLejiznTi3nzm4oABTvKR1w6mSrbaFpa2FqbRnqZt5nXB/nHWNqXmKqHuLpHagtXmQpXR8pH+Dqn96pns6tZw6u6Q9uaI5uJ8AT7midryqm6y7fpyojKu6hK2Nqq9thJ5vlqVtkqVzp7FytrdtkKp5k695gZ11e5lzMq+TJ7OUNLabPrujAE25mVe2m160pGHArm3Nu2vQtmXDpiOWhkuymXbPrVW2my6Zii6hkDinkjGhkDKlkimxnCaxmyiznDO2oQBOq5RYsZt22rpU2bZgxqFwsowppI4Yoo8epZEhqJQZo5EYopEgqZIjs5Qhs5Mms5UpspQtspc2tp8uspxMjA5WWvA9bgAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/03b6810fd10b370c8aca9660ed18d330/bc8e0/address.png","srcSet":"/static/03b6810fd10b370c8aca9660ed18d330/8ac63/address.png 200w,\n/static/03b6810fd10b370c8aca9660ed18d330/3891b/address.png 400w,\n/static/03b6810fd10b370c8aca9660ed18d330/bc8e0/address.png 800w,\n/static/03b6810fd10b370c8aca9660ed18d330/6050d/address.png 1200w,\n/static/03b6810fd10b370c8aca9660ed18d330/00405/address.png 1600w,\n/static/03b6810fd10b370c8aca9660ed18d330/0e6e2/address.png 1920w","srcWebp":"/static/03b6810fd10b370c8aca9660ed18d330/ccdb5/address.webp","srcSetWebp":"/static/03b6810fd10b370c8aca9660ed18d330/6b183/address.webp 200w,\n/static/03b6810fd10b370c8aca9660ed18d330/fc32b/address.webp 400w,\n/static/03b6810fd10b370c8aca9660ed18d330/ccdb5/address.webp 800w,\n/static/03b6810fd10b370c8aca9660ed18d330/9000d/address.webp 1200w,\n/static/03b6810fd10b370c8aca9660ed18d330/e0075/address.webp 1600w,\n/static/03b6810fd10b370c8aca9660ed18d330/30cf3/address.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s…","fields":{"slug":"/Comic-Book-App-With-Marvel-API-and-React/"},"frontmatter":{"date":"November 02, 2023","title":"Comic Book App With Marvel API and React","series":null,"description":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s Superman cartoons. Which is sort of ridiculous since I grew up in the 90s, but I guess that's what our TV companies could afford at the time.","tags":["web","react","API"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAAB80lEQVQY0wHoARf+AClYbwJFeiZpnmql12un1HGizIet3ktxphA6chFAdhU8eCJMhTdQiDZVjxJQih1TkB5FeD9SfD5Sg0BumAAoVGkOR3AQUYZekZlekIdwmY18lb1Yb506Wok2ZJRQeZVUhaViiadgi65YeZ1TX45FT3RdeJdjg7M/h8wAIFJ0FU13Om+ayM7Lp7a7q7jBu7vAtbe8hJmvZIiOqrJ7vbp1zsp1sKtsgH1jZW6DYGCMbH2wRmKSDE+LAEFtkTlqknWUr7S1vbS+zaq3x5ytwbG8xnmVs2yMiZ+lc6mpbq+nabitamZobFVsf1Fbei9WcyRIdRE7eABIcpM4Z446Zo5ohYyHoZaJpZedr5+MoKFuiZd3kop9knlykZCGmJSHkYKHioVfZoVee385XHclToUZSH0AQGqMKld/MmONq7N7vbNktq9lz8Rmh5yIiZ2GubVuy8Ruq6tpvr11vL6Bd4RzGkeEP2eYP2ebVXmWUnuZADFfhV6OuFOBpZiieJ+ofp2ke5mjgoOhoJeoiY2Wb5qiepagepufb4eZgjpjfyNYjTNxpC1mm0tupF59qQAkVX9ViLNglcBIfKlxqddonspmnMxckr5YjLQ6cJw+daMvZZMwZ5UtY45AdqMzaJQvZ5U6VY1EXpg6WZdFOOj9r+dRhAAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/9dc0ca21ac4035a31d6c67333000d87c/bc8e0/marvel.png","srcSet":"/static/9dc0ca21ac4035a31d6c67333000d87c/8ac63/marvel.png 200w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/3891b/marvel.png 400w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/bc8e0/marvel.png 800w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/6050d/marvel.png 1200w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/00405/marvel.png 1600w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/0e6e2/marvel.png 1920w","srcWebp":"/static/9dc0ca21ac4035a31d6c67333000d87c/ccdb5/marvel.webp","srcSetWebp":"/static/9dc0ca21ac4035a31d6c67333000d87c/6b183/marvel.webp 200w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/fc32b/marvel.webp 400w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/ccdb5/marvel.webp 800w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/9000d/marvel.webp 1200w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/e0075/marvel.webp 1600w,\n/static/9dc0ca21ac4035a31d6c67333000d87c/30cf3/marvel.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Sometimes you gotta do what you gotta do. For quite a while I’ve had this idea of making a radio player or an app which you could use to…","fields":{"slug":"/Radio-Player-App-in-React/"},"frontmatter":{"date":"March 09, 2021","title":"Radio Player App in React","series":null,"description":"Sometimes you gotta do what you gotta do. For quite a while I've had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQUlEQVQozx2SS0hUcRSHZx1YCC1yfGT5NvGRDBU9QAZDFHzBmKWLpFxEQpBQLTKLwBkfYY1NouNj3q97Z+48vHNnnFGbcbJVqyhsGW2iTavWX39dHTgcvsM5309XpOxSGtFoiCSpj6jUemUaN3w0OAOi+mnY9FHnkWgOq5QFVIpDO5wOZLgY+0iXlqN3u0BPKs+lrTwVkRS6c0qSxmiSUiWKXpbQS9JxrXJ4qBKw8mAIfTBIXVSlRECL/GlasgU60nu0h1SuSEkMwSSdsSxGbR9dYyLN2WCYgRkfA2YvJrObkSkvd1+6GJp10rXgZ+yZG6MjzKBF5t4LP/MzUaafBzDaI1Q7w7T6ErQFthhM59HVbqU4L4Z3+mwcDlk46LbxfdTMv6uzxB7OI42840/PDEuP1lDurPJteJHPI2/5aZxjbHmNejlNk0uh2RvnRjiNrkbLYHDI/Lo5x1eTmd+dFg5vW/g79ArPxDILT204nljJ3bKijr8n9tjN9n0bP4bn6VqRaJVTXDgCemJcE+frKsX/WhQN07KdXusmox/W6XcE6Fv10OHyYxCSJhclXlvdTCzFSc3t88Wisf9GZdqWoVpc1+pP0CKA/Wnxw1NKhtqYxpl4hnJXlAq7RGkgTpU3SqUszIre+EqWB6sHdG7mmbTnWHAWmPJ8wrSucjl4JEWlI5qhO51DdyKeoziSoU5RaRLG2zdC1PiE8aBGsZzlZHiPktAu+kBWxCUrlqRoWwthkAUgsUuflj+OzXWtQJmS5T+G3p2pl9LbsAAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/089090f649eaebf75d83fee9b0c1db68/bc8e0/radio.png","srcSet":"/static/089090f649eaebf75d83fee9b0c1db68/8ac63/radio.png 200w,\n/static/089090f649eaebf75d83fee9b0c1db68/3891b/radio.png 400w,\n/static/089090f649eaebf75d83fee9b0c1db68/bc8e0/radio.png 800w,\n/static/089090f649eaebf75d83fee9b0c1db68/6050d/radio.png 1200w,\n/static/089090f649eaebf75d83fee9b0c1db68/00405/radio.png 1600w,\n/static/089090f649eaebf75d83fee9b0c1db68/0e6e2/radio.png 1920w","srcWebp":"/static/089090f649eaebf75d83fee9b0c1db68/ccdb5/radio.webp","srcSetWebp":"/static/089090f649eaebf75d83fee9b0c1db68/6b183/radio.webp 200w,\n/static/089090f649eaebf75d83fee9b0c1db68/fc32b/radio.webp 400w,\n/static/089090f649eaebf75d83fee9b0c1db68/ccdb5/radio.webp 800w,\n/static/089090f649eaebf75d83fee9b0c1db68/9000d/radio.webp 1200w,\n/static/089090f649eaebf75d83fee9b0c1db68/e0075/radio.webp 1600w,\n/static/089090f649eaebf75d83fee9b0c1db68/30cf3/radio.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g.…","fields":{"slug":"/Infinite-Pomodoro-App-in-React/"},"frontmatter":{"date":"February 21, 2021","title":"Infinite Pomodoro App in React","series":null,"description":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACMklEQVQozz2S20uTcRzG9yeFodWNzTwtS0WNLDIKEovIAqEUkoZzi6kd1Jno1uY0fXee8927qdu0jKGpNCvp4JXmodQ06WKdyD79XNHFc/v5Pt/neVS5rmWO+dbQeFcpUz5RNLTB+egXLk8kORn7ToayS+YIZEdAHRUK/eSqeY4y50eqH77kgn2BA2HIEDoY+o3qzOgOue4VshxL5PnW0Y0v4ZlI4BbyTb2lO/Ic+5N5rLEXBCKTGNtD3G9WMN/20KsbQGt6Solrg0z5RwqqUgtQvnBX6Fslx79By2CchbkZHEqMrsA4bxIz9MkRTMos4QE/WqNMW4uCtn2CYvdmymlrS5ByaYU08Ykq2yNggx/IDe1wQtmk2jmLzhun2jHNdW+CxmCCK/559H1xGqQ4pxyrnHatU+zdRt86xgPjID16B5dsr9k3KoB77goE8LjymRL/IlLUQFN/A7aQEbvSjCXUhE66Q2ygBqm3jqDtGqO+WrT3vFgMPgH0Y9U7qbS/+wtUS4vkuJdRC+tVwUlk51liUiGz/nzG7GoeO44iPyol0HWEVwENsrUA2ayhs9FMR1NQZOmmrVkmO5AkfVgA81zvqRje4rB3i0pPRFwK0N5fj8law92emxgsdZgc9dyy6OnuqCLcdRFLYxXdwpXN4EzlVyoi2D/yr+Ui/1qq5WIxl/LQtpjNJuXhHSqiSTTDSTKCv0gL7JIuGjzk+8a5ngVudExR2/ks9WbW0Nf/sL35/AEigMrciMdEIQAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/0b5e120ab5fae721e3a3a1c4705557dd/bc8e0/pomodoro.png","srcSet":"/static/0b5e120ab5fae721e3a3a1c4705557dd/8ac63/pomodoro.png 200w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/3891b/pomodoro.png 400w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/bc8e0/pomodoro.png 800w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/6050d/pomodoro.png 1200w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/00405/pomodoro.png 1600w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/0e6e2/pomodoro.png 1920w","srcWebp":"/static/0b5e120ab5fae721e3a3a1c4705557dd/ccdb5/pomodoro.webp","srcSetWebp":"/static/0b5e120ab5fae721e3a3a1c4705557dd/6b183/pomodoro.webp 200w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/fc32b/pomodoro.webp 400w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/ccdb5/pomodoro.webp 800w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/9000d/pomodoro.webp 1200w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/e0075/pomodoro.webp 1600w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/30cf3/pomodoro.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Getting a job in tech can be really hard, especially if it’s your first one. Every company prefers some experience, and how can you get…","fields":{"slug":"/How-to-get-a-job-with-no-experience/"},"frontmatter":{"date":"January 24, 2021","title":"How to get a job with no experience","series":null,"description":"Getting a job in tech can be really hard, especially if it's your first one. Every company prefers some experience, and how can you get experience if no one will take you? It's the tech version of the 'Chicken or Egg' question.","tags":["job","portfolio"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA9ElEQVQoz2Ng8Fr7H4w91/yHs7HxcWGYOhiNIei+GoKR+W6rIWwY32MNgo+uH9kmRu+1/w1y9vy3Lz/436p4/3+xqC3/LYv2/3eqPPRfHyhuXXIALG6Sv/e/YNim/3Lx2/4b5u6FWAAzB9lAZp+1/80K9v23AWrUzdoN1sQTtOG/cPhmIL3xPzeQzRO88T9X4Aag2nX/WXzX/ecEsjG9jORCVqAikEFuNYf/OwBd6gx0nV3Zwf+qKTv+84Vs/M/giuZljzU4vAyUYPNbB/YGhL0e7BLOgA1gmgloGchCgpGDLsAIY3ugYWyRgA1jxBKh5EJAHgC5kkOkE5pq1QAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/d198c50e0f78b5205c213040941fa7f2/bc8e0/indexCode.png","srcSet":"/static/d198c50e0f78b5205c213040941fa7f2/8ac63/indexCode.png 200w,\n/static/d198c50e0f78b5205c213040941fa7f2/3891b/indexCode.png 400w,\n/static/d198c50e0f78b5205c213040941fa7f2/bc8e0/indexCode.png 800w,\n/static/d198c50e0f78b5205c213040941fa7f2/6050d/indexCode.png 1200w,\n/static/d198c50e0f78b5205c213040941fa7f2/00405/indexCode.png 1600w,\n/static/d198c50e0f78b5205c213040941fa7f2/0e6e2/indexCode.png 1920w","srcWebp":"/static/d198c50e0f78b5205c213040941fa7f2/ccdb5/indexCode.webp","srcSetWebp":"/static/d198c50e0f78b5205c213040941fa7f2/6b183/indexCode.webp 200w,\n/static/d198c50e0f78b5205c213040941fa7f2/fc32b/indexCode.webp 400w,\n/static/d198c50e0f78b5205c213040941fa7f2/ccdb5/indexCode.webp 800w,\n/static/d198c50e0f78b5205c213040941fa7f2/9000d/indexCode.webp 1200w,\n/static/d198c50e0f78b5205c213040941fa7f2/e0075/indexCode.webp 1600w,\n/static/d198c50e0f78b5205c213040941fa7f2/30cf3/indexCode.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"I’ve been playing around with a few different free APIs and I decided to make a simple meal planning app with Spoonacular API. It’s very…","fields":{"slug":"/Building-Meal-Planning-App-with-React-and-Spoonacular-API/"},"frontmatter":{"date":"January 17, 2021","title":"Building Meal Planning App with React and Spoonacular API","series":null,"description":"I've been playing around with a few different free APIs and I decided to make a simple meal planning app with Spoonacular API. It's very easy to set up and you can add a lot of things to it if you want to make a full blown food/recipe app.","tags":["react","web","tutorial"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOklEQVQozz3S20uTARjHcf8K6UK66CLC8qbDhSlkUDfVVQdtJuScx+2d7/a+r3O6PCea5qhMK9dWwZxNVzIPm4dZGuo8TIUkWWJRBhUReRV5wL69WvQPfPh9eZ4Y89Qm0sw24ugahsAqhQMfEQZWKRj8ir7/PdLYd8TwBnIEhJ53nLO2omuPII59Q9e7hMYTxjD6A1k1dqwYKbyOeQ6Md1wIWacprjEjW7PRm3UUKelYAxH0UyCFf2IqqcSmTUVUriH4X6rwIAX+V5hGP6mjfv8DZ7YQJ9axPBujrKUBpeU+tnYfpfYqLI2VSL1zGINR5KEPdDTfINrVhtfh4KpzAM2DANm+PjJ9ERXbQppWQXHiF8Zp0Dv7kMtFLNUS4k07BfUNWGsEckUdedfL1SVLhJy3Ga4u5vGTTpJvjXCm9QVZ/kVyh7/srtsFM/s+k+p+Q15TM4o1E4t0gUrXPQwVNkrrTMi2HHKamigLrGBXJOxX0nDWNGN4vkJ+eBPT1DbK7N/c3eSTjSHOPlrgYrUDbVkVQpsbqa0d00MPup5l9APLeOVaokmnCApaHIY8hhISCR1KxFvrRXkNO5X/wXTPPOmdS2QY8qmwaTBLGmx1CjbfMDnzYHeNs7D/IONHkgkeTyF4NInggWN0xe1jNi4B991BChfVo02uq8lbxGi7o2S4wxg9I1j9k5T0RygJzFE0voa2B1xpCp2xsTguZ2M5r0NIuUS9TqYj/jBP9+wlFH8Ce/dbxPmdT9jgDxamtxOu9Nb+AAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/235fac93af911cd2478cd15927664312/bc8e0/index.png","srcSet":"/static/235fac93af911cd2478cd15927664312/8ac63/index.png 200w,\n/static/235fac93af911cd2478cd15927664312/3891b/index.png 400w,\n/static/235fac93af911cd2478cd15927664312/bc8e0/index.png 800w,\n/static/235fac93af911cd2478cd15927664312/6050d/index.png 1200w,\n/static/235fac93af911cd2478cd15927664312/00405/index.png 1600w,\n/static/235fac93af911cd2478cd15927664312/0e6e2/index.png 1920w","srcWebp":"/static/235fac93af911cd2478cd15927664312/ccdb5/index.webp","srcSetWebp":"/static/235fac93af911cd2478cd15927664312/6b183/index.webp 200w,\n/static/235fac93af911cd2478cd15927664312/fc32b/index.webp 400w,\n/static/235fac93af911cd2478cd15927664312/ccdb5/index.webp 800w,\n/static/235fac93af911cd2478cd15927664312/9000d/index.webp 1200w,\n/static/235fac93af911cd2478cd15927664312/e0075/index.webp 1600w,\n/static/235fac93af911cd2478cd15927664312/30cf3/index.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Building projects is one of the best ways to learn a new technology or to get better with a stack you are already familiar with. Wanting to…","fields":{"slug":"/How-to-choose-your-next-side-project/"},"frontmatter":{"date":"January 03, 2021","title":"How to choose your next side project","series":null,"description":"This approach will teach you how to figure out project ideas on your own. The ideas will be yours, you will be passionate about finishing your projects based on them, and you will build out your portfolio with projects that actually mean something to you.","tags":["productivity"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOElEQVQozy2S20+SAQDF+X96aKuty9Zls4e0sRZqbSbTYimQUQrIRQFTEQVFgdQC5OM6RIFExOsW4MTbNLZahlub6w/opa3H5q9vroeznaez3zk7kmpohrLfx47fQyXoYz8wxZ6ofWFa9B6+BNyUHTbcTQ1MSO/SV3cDp6yekOIxh2MGfm+k4ajC+UFZ1DaS0McMT1bWUCaSaHJ5HIkYo9k08qU8YxGB74FJckYN2Y5mqmYFyy9kDNffxiW7z1KPgrPIFBzvcL5fvAiVpJMxbJEIw4k41rkQgWgYp+gNIYGY4Oc06CVn0lA2qykZOqhalaTkD7BL6wi0N1G0dvEj4OTXcoK/lU0kqUwKVX4VfTyBaTGDLTnPbCyCPZtlMhTkVJxixaol2ibjs+0VtREtJU0LA/eu867lIQV9BxmNnLP4e/58KiBZiIcxizS6WBxjWKQTQizO+nDGooRnvGJlD2tve0mp5dQcvZwMvaEg1jbfuYq7uYFAWyPBVikly0tOZ4aQZBaS6DJZrNEoLjFkyefm0DPGrtfFgc/J4fQ4xREziWeNVHo72dW1k1U84vW1S+huXaHn5uUL2jmxwbqxC4knvUirEEUthNELAgXHAJUJO+XxIbb/a89l4aBPxbcJKzXvID89JkpmJf6nUuaVLWyZujgeNfHV1Y+kKl6kYNUR16pIGTQs93WTt2jF3XSs2vRsDBrYtHWT06kp2q1sDVs4mrJT+zDOibufI0snFeNz1lWNZNrq+QdLELAInEkRjAAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/900144a81ada78f750bf453d764360d1/bc8e0/index.png","srcSet":"/static/900144a81ada78f750bf453d764360d1/8ac63/index.png 200w,\n/static/900144a81ada78f750bf453d764360d1/3891b/index.png 400w,\n/static/900144a81ada78f750bf453d764360d1/bc8e0/index.png 800w,\n/static/900144a81ada78f750bf453d764360d1/6050d/index.png 1200w,\n/static/900144a81ada78f750bf453d764360d1/00405/index.png 1600w,\n/static/900144a81ada78f750bf453d764360d1/0e6e2/index.png 1920w","srcWebp":"/static/900144a81ada78f750bf453d764360d1/ccdb5/index.webp","srcSetWebp":"/static/900144a81ada78f750bf453d764360d1/6b183/index.webp 200w,\n/static/900144a81ada78f750bf453d764360d1/fc32b/index.webp 400w,\n/static/900144a81ada78f750bf453d764360d1/ccdb5/index.webp 800w,\n/static/900144a81ada78f750bf453d764360d1/9000d/index.webp 1200w,\n/static/900144a81ada78f750bf453d764360d1/e0075/index.webp 1600w,\n/static/900144a81ada78f750bf453d764360d1/30cf3/index.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"My website is built on top of Gatsby, which is a “React-based open source framework with performance, scalability and security built-in”. It…","fields":{"slug":"/How-to-Integrate-dev-to-with-Gatsby/"},"frontmatter":{"date":"December 27, 2020","title":"How to Integrate dev.to with Gatsby","series":null,"description":"My website is built on top of Gatsby, which is a React-based open source framework with performance, scalability and security built-in\". It's a fast growing platform with a very active comunity and it has a plethora of plugins which you can use to customize your website. It's also a static website generator, which introduces certain limitations.","tags":["web","react","gatsby"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACF0lEQVQozyWSS28SAQCE+Tse/QFePPkfPBm8aaKJXnswJurNNDFemmpbD5o0Whq0FltapcWGFBD2xe6yy8Iu++ANZaFgKZ+beJjb5MvMZGJLUWcpiFyVS0xEESUtUzwwOfssUdgpU94+pyk3UN0BH1IZ1hM/+H5aYvNjkkLexK9d0K4ETCWdK1EiRrnMPNJQUnGlJlvPM2yupEm8Oubd4yTbb7KcZnQSxyJ343EePnrK6tst4vEH5FJnzKteFEZkEcGGVYvYWJBpyzU8rYWrdikmFWppBfVQILWTR6g2MbsGvxWNZ2tpNhJ/KJ0UON87JixXonYSfyWZgVHHaXaI+YqNp7bxtS7dis+06jBu2JylRF6v7FLUdJxAIVcfcev+GjfuPOHgZxcMi0UEm8kVeqaN7XZRepfEPO0/rFdxGVUsAtXC8nv8OtFZfbFLtijQCaK0BZ+b9z5x++5LDvcN+nmFaQTr1hzqXh9hMEcYLogFWoeRUudCNehYDobdwbxcsvVFIJluRGaXllnEFaq0pIDDowa5/Twj2cAxXGqtIXJ/RiOYMbYmxOZShYmq0667WMEQoT1Bn16zvmFwmm3TafbpyTZhtDOqSO6oxvuvHWzTQ/VG2P6E0AxZ6hMmVlR5rFUJGj5mMELszZC6kZyQ/W8W5UydseYQSgZzQWEZ3aqUrbB30qBcHeDpIddayKI65aIxI3Dn/AMU4SrDrSKMhQAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/bc8e0/integration.png","srcSet":"/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/8ac63/integration.png 200w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/3891b/integration.png 400w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/bc8e0/integration.png 800w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/6050d/integration.png 1200w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/00405/integration.png 1600w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/0e6e2/integration.png 1920w","srcWebp":"/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/ccdb5/integration.webp","srcSetWebp":"/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/6b183/integration.webp 200w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/fc32b/integration.webp 400w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/ccdb5/integration.webp 800w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/9000d/integration.webp 1200w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/e0075/integration.webp 1600w,\n/static/60cbc3a5ad8f91e8d2b3ad5b9195b087/30cf3/integration.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Until a few days ago I had no idea voice control and speech recognition were such a big deal. I lost the link to it, but according to an…","fields":{"slug":"/Build-Voice-Navigation-with-React-and-Speech-Recognition/"},"frontmatter":{"date":"December 19, 2020","title":"Build Voice Navigation with React and Speech Recognition","series":null,"description":"Until a few days ago I had no idea voice control and speech recognition were such a big deal. I lost the link to it, but according to an article I read, a big percentage of population likes to talk into their phones and home assistants. Maybe I am getting old, since it looked like the age group that uses it the most is 16-24? I think that's great (using the tech, not me getting old). Not only does it promote even more accessibility on the web, but it also gives us a glimpse into a future where we are no longer slaves to our clumsy fingers. I personally make too many typing mistakes, both on PC and smartphone keyboards.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACNklEQVQoz02RXUiTYRTHd9OVBF0omZloKV2IUViQdVk3RRcFBQl9oKilFprW3PJrbtP5+urmO7elLFNB1FIv88IsdpFE0YUGpSWYH0QE0sztfZ3b2q/H9UEHDgceOD9+//PoNk2daCYHEZPCgrGF1aUltisSiRCNRgmqwfiMRX8Si8WYnZ3hQ42F8cJqpIvFLNbY2LJ0sW52ErB2odPiwE7C9XY+2ZxomobZ60bvsVPb46RzfAjbcB+XmvQUd7Uy5pvEW1XHzfwrVFbcYNxYz2azG79ZYcPiRLfZ6PgHXJRc+AMbWEcHaBjuparXiW9ulsGpCQoeSBhHHjI9/w5H2V0G6o286ld45pBZE/sbwvCH5T/DLQFcVrzMfZynwilxxyVzraOJOmEpPe7nsklPid3K4tcvvDA0Mmww0l11m+n2NiJSN/4mYbgd+a+h2uxiQXbjm3mLcciL9Uk/xsEeqr0KXt8E5X1OLE9H+LaywvNbBuTrBVSeO0NHURHvDa1ExL4qoHHDYKuHYHsPyw1tTI2Oseb/TkBTRWuExQeFQiFC4S3UgEpZuZ7k5Czyjhyn5MJ58k6eZs/BPDryS4mJ2HFgQADXJQ+qmJ/vt/BaHP2lvpE3ZpnJdgVPYSnzdTYKzuajS0ghITGNpL1ZpGceIiXzKDv3ZZN64DCrtfLvyOofS03uJmz3otrcBFpcaOJtzaqwVCNud89GWkZuHLZr935SM3PJOXaKjOwTJKblsCMpnUdXy/kFQ0+9QbZ74FgAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/a2244cabb7554fc37a4a2a8d6be10da4/bc8e0/voice.png","srcSet":"/static/a2244cabb7554fc37a4a2a8d6be10da4/8ac63/voice.png 200w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/3891b/voice.png 400w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/bc8e0/voice.png 800w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/6050d/voice.png 1200w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/00405/voice.png 1600w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/0e6e2/voice.png 1920w","srcWebp":"/static/a2244cabb7554fc37a4a2a8d6be10da4/ccdb5/voice.webp","srcSetWebp":"/static/a2244cabb7554fc37a4a2a8d6be10da4/6b183/voice.webp 200w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/fc32b/voice.webp 400w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/ccdb5/voice.webp 800w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/9000d/voice.webp 1200w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/e0075/voice.webp 1600w,\n/static/a2244cabb7554fc37a4a2a8d6be10da4/30cf3/voice.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building…","fields":{"slug":"/Building-a-Task-Management-App-in-React/"},"frontmatter":{"date":"December 12, 2020","title":"Building a Task Management App in React","series":null,"description":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a task management app has been on my mind for a long time now. I decided to build it in React without using any additional plugins except node-sass which allows you to use .scss files in your project.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACJ0lEQVQozy2SbU+ScRSH+UZttrQCLQUUUwMh1xDNzEwcppIIAiJPIiqKSqLyIKI3EtyKCsOVvjA3N7e2vtPVn60X15uznev8zs5RNJ94eHbsoSnv4kne+Z95mk4WeF300ScH0Z36eXcZQWUb5ammF13gK321ZVSnizyXPLQUBFLD40bRIoSqopeByxiTV0nGrhLM1tMYpTDagg/TWRhLfRXDnovgxDgPqXXkVAz9kR9TMYQy5UaV8/CiEUygUBYW6ZB9OO4yyLdV5Mdf3Dze4yjt8jLvpl8OY6xGsGS9JB0z/M1u8SAlMaUDdGZFb8pDR0YgpK1HIqG67Ed7voS1tk20lmbvRiJ8dsCH4gqa4hL95QC6Hz6MeR+Sc5Zrt4M/uTj9OT/KfRdqMag960adEzSEXWd+9LUISxUv5fggye0RNjcsRKMWVqLDxJfN5NbM6ONzOO1TBLp17NutfJbidBx6aEu7RDo37UcLaBsrvzkPoJRDhHfGubO9oujo5tbZRX2ui4pDx66nj7LTwPBMGHXPKN/0b8lHQuyf3pC//8370iqth/OoxUG0kkjYcxGkXaw2KIpfEjamDueYztgx70zyccuKI7CI1eZlaH4DozXI1LSPUCzH2vE1m5k6oYsybScuNOIrNNICCkM1TE/Jz6ef6wyIa/ZWllGXgjQXvBhSCUzTCTrHwpjtMYYcm4y4v+Pfq7CSrTLhzxA8kOktR2k+dtIqpP8A4jaJ4Hdy4z4AAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/1312c0bcf30a703d64ed453a69a090d5/bc8e0/task.png","srcSet":"/static/1312c0bcf30a703d64ed453a69a090d5/8ac63/task.png 200w,\n/static/1312c0bcf30a703d64ed453a69a090d5/3891b/task.png 400w,\n/static/1312c0bcf30a703d64ed453a69a090d5/bc8e0/task.png 800w,\n/static/1312c0bcf30a703d64ed453a69a090d5/6050d/task.png 1200w,\n/static/1312c0bcf30a703d64ed453a69a090d5/00405/task.png 1600w,\n/static/1312c0bcf30a703d64ed453a69a090d5/0e6e2/task.png 1920w","srcWebp":"/static/1312c0bcf30a703d64ed453a69a090d5/ccdb5/task.webp","srcSetWebp":"/static/1312c0bcf30a703d64ed453a69a090d5/6b183/task.webp 200w,\n/static/1312c0bcf30a703d64ed453a69a090d5/fc32b/task.webp 400w,\n/static/1312c0bcf30a703d64ed453a69a090d5/ccdb5/task.webp 800w,\n/static/1312c0bcf30a703d64ed453a69a090d5/9000d/task.webp 1200w,\n/static/1312c0bcf30a703d64ed453a69a090d5/e0075/task.webp 1600w,\n/static/1312c0bcf30a703d64ed453a69a090d5/30cf3/task.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel…","fields":{"slug":"/How-to-build-a-Pixel-Art-Drawing-App-in-React/"},"frontmatter":{"date":"December 05, 2020","title":"How to build a Pixel Art Drawing App in React","series":null,"description":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB/klEQVQoz1WRXU+SYRjHOahhra3WkfnCizxAvD7w8PCmgICYEtqiUGYkTBSTgmi1FktrUivzpCw329paW5u5DlqetPwI2SfoqJNO+ha/nodh5cG1+951X9fv+v+vWzNw1ks7rB5Mymm0eJC9YarnzuN3+TEqOTVv8ccxOWSMVlGplTAIIv0DTuWuvnva/WpoVJjaZOwA+y0iKW+ElcRlfKERunVW7IOjxFtbSLl5evQ2Fmfn2H6yTKtaxCOFMCg9ps5gjbGjUAW2lZpFzHKIWDJK4WKBbK6I4IsSqT3EPT6F3uTk1WqLD61lNm8vEYsm0ClqhQPgX8sd22psvX7Dt2aSHxsy+/t7uF0RxnyjDHniykpEdtYe87F5l2dXp8kkR+gzuRBs0j/ggTqTkjyjs/Bpd4/fn+/xpazn19dtJjN55oamKAxOKjUBZmcWeJDLc8EjEgwOo7fJCFZ3m6H5X53Z4eNUt8DTR/f5+W6dSnGH77svqNUbCHoHQqLAiXAdV7rJSnmepYkUzrEFjiXvYAhkECyuw5ZVhT16O9npGd5urPF+9TkvS4uE5DCG4TynL21y1FlG679FbKJBKl1CG7zOEbnKyXAFwRk8DFStq8vtVT5m3BWgEQiRdkqY7TK92XW07mtorVfo8tfRSDfReGscD96gy1tRBpXokzL8Ad1CGuQcSTBZAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/289cf244f4327c29c8bdd92f75c2f460/bc8e0/pixels.png","srcSet":"/static/289cf244f4327c29c8bdd92f75c2f460/8ac63/pixels.png 200w,\n/static/289cf244f4327c29c8bdd92f75c2f460/3891b/pixels.png 400w,\n/static/289cf244f4327c29c8bdd92f75c2f460/bc8e0/pixels.png 800w,\n/static/289cf244f4327c29c8bdd92f75c2f460/6050d/pixels.png 1200w,\n/static/289cf244f4327c29c8bdd92f75c2f460/00405/pixels.png 1600w,\n/static/289cf244f4327c29c8bdd92f75c2f460/0e6e2/pixels.png 1920w","srcWebp":"/static/289cf244f4327c29c8bdd92f75c2f460/ccdb5/pixels.webp","srcSetWebp":"/static/289cf244f4327c29c8bdd92f75c2f460/6b183/pixels.webp 200w,\n/static/289cf244f4327c29c8bdd92f75c2f460/fc32b/pixels.webp 400w,\n/static/289cf244f4327c29c8bdd92f75c2f460/ccdb5/pixels.webp 800w,\n/static/289cf244f4327c29c8bdd92f75c2f460/9000d/pixels.webp 1200w,\n/static/289cf244f4327c29c8bdd92f75c2f460/e0075/pixels.webp 1600w,\n/static/289cf244f4327c29c8bdd92f75c2f460/30cf3/pixels.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say…","fields":{"slug":"/Easiest-way-to-set-up-your-Github-profile-page/"},"frontmatter":{"date":"November 27, 2020","title":"Easiest way to set up your GitHub profile page","series":null,"description":"If you are a developer you probably have a GitHub account, and if you're like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that's true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.","tags":["productivity","github"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACMklEQVQozy2Sy0tUcRiGDwhWuOqvaFdtpFIMEReFFcwiGCvTLihBymBM6tznzOWM58zNuZwzDiPaYE6FZZFRmUQluMisMCJbSFDgJsistDRnnn5T7b/v+Z735ZMm5CgfYgobup9iyguGH3QZMj5+pvx8H5D5kgzwy1BYUl2YGw7RXN/ActgB2SBbYr5k+ChGOylq7Uhz/f0saAqf4kG+TY7x8VqO5bvXWcrrvLuRZ3lynB+67++BhYxKprcT28kjjFrO/AfKFDMBSonL/4BTgX5mgwHeZxLMPZ5idrzA/INJZp895c7ELWYePWQ16RZAmcWhGAWXFbnFxLCljbW0gBleARSGabsAdiAVPCrTPhFpNMH8WI7FvMHrTJi3twu8GBviZTYqFj1iwc3KlTDTEQ+KuYl7tnY2RNyi4RGWXkq6i2L4AtKK6K2YdvIqM0CPmkMJxPEpSeRAgqgcYiQcZ0718jnp46YWI2XpwrRnF7aWE8yE/GwaLmHvZksASxEBXE2X4zgYjSdpdAxS7blKjTWJ2aXT7CyDYzxPqTR2Z6k8nsRkCaOebqLzbBtSTTf1rTJfhWGZsVU2XNOdrBtuFqIunig2UqEIeb+P+0En2YDCsKZR6ygg1drYcUxlZ2uWU61W6kxdVOyzIFVfovuiE3I2fpc73DTs4iXsogcbDPaJS1bRRx/rul28kBUtMYJ0OETV3vNsP6qxzTSAdMCJdNBBZV0vFbvPUbW/gzehHoi08weZDrUph46jhwAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/cc4780a5217804212e07214ae02b06ca/bc8e0/github.png","srcSet":"/static/cc4780a5217804212e07214ae02b06ca/8ac63/github.png 200w,\n/static/cc4780a5217804212e07214ae02b06ca/3891b/github.png 400w,\n/static/cc4780a5217804212e07214ae02b06ca/bc8e0/github.png 800w,\n/static/cc4780a5217804212e07214ae02b06ca/6050d/github.png 1200w,\n/static/cc4780a5217804212e07214ae02b06ca/00405/github.png 1600w,\n/static/cc4780a5217804212e07214ae02b06ca/0e6e2/github.png 1920w","srcWebp":"/static/cc4780a5217804212e07214ae02b06ca/ccdb5/github.webp","srcSetWebp":"/static/cc4780a5217804212e07214ae02b06ca/6b183/github.webp 200w,\n/static/cc4780a5217804212e07214ae02b06ca/fc32b/github.webp 400w,\n/static/cc4780a5217804212e07214ae02b06ca/ccdb5/github.webp 800w,\n/static/cc4780a5217804212e07214ae02b06ca/9000d/github.webp 1200w,\n/static/cc4780a5217804212e07214ae02b06ca/e0075/github.webp 1600w,\n/static/cc4780a5217804212e07214ae02b06ca/30cf3/github.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education…","fields":{"slug":"/Build-Simple-Timeline-in-React/"},"frontmatter":{"date":"November 22, 2020","title":"Build Simple Timeline in React","series":null,"description":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACHElEQVQoz02S709ScRTG+ReKOUs3/AFcdG7NNduqd76yOTPX0kTQIc5QS24ljgRETbhCoF4uKJehL9Da8tZSoxWamZWzH1t/06erNe3Fs+d8t7PPzjnP12B1yAh9Gcz9KpUDq1R5X2J6UqQ69J4qZwZTT5pqewqhN33SV9vqo0aX9fj9n6xO5cQNtvHXWPybXJV2uF84pCN7gGvtO7eX97k1rdEZKtA6lqfascTlOwFGuzoQ7W1c6xzH7FxCsC+ewo7dUB/5SG2gSMvCHs+3Svz+9YPdvQOC6zts7x/x8/Ab7aJCRXeGG10PKUZFjpZ9DA6NYurPUye+QOjPnk1Y/3QHc/AdLfES7vkNZteK+FbfMpLe5L6URyq84bpH4YIzh9u3wPakl1fjvTyeTVAV/UpD4gvCg3WsPfK/lQPb1Pm3qIgvU5ZMYkyqGONRLkoxjFMRjOEpLEP67aY/0R3XkN12xOZGBoMxzDrQEv2MzaedAQWXPq47y/ncLOVSgLL0DGXPJjinTlIuT1EpznBpQKU9XECMrDDQ5eRmUwNadpLQ2hbN8i6W8Acdpvy9oeA4LlLU3JP0pBO6x6gZjlHrmaPCI3HFmyFRKOGPKoQSeVbUFfZSY5S0NBE1h6xt0DShYXYoJ1DDafx6ioL+TQRHBpsuiz1Do0vFE9UYCaVoc/kZDiziDSsEpAVC82kezckEk4v0Tecw3U1h60vzB+bicRLbGqHmAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/a929e3923f26a25007ff04dbf6fd2936/bc8e0/timeline.png","srcSet":"/static/a929e3923f26a25007ff04dbf6fd2936/8ac63/timeline.png 200w,\n/static/a929e3923f26a25007ff04dbf6fd2936/3891b/timeline.png 400w,\n/static/a929e3923f26a25007ff04dbf6fd2936/bc8e0/timeline.png 800w,\n/static/a929e3923f26a25007ff04dbf6fd2936/6050d/timeline.png 1200w,\n/static/a929e3923f26a25007ff04dbf6fd2936/00405/timeline.png 1600w,\n/static/a929e3923f26a25007ff04dbf6fd2936/0e6e2/timeline.png 1920w","srcWebp":"/static/a929e3923f26a25007ff04dbf6fd2936/ccdb5/timeline.webp","srcSetWebp":"/static/a929e3923f26a25007ff04dbf6fd2936/6b183/timeline.webp 200w,\n/static/a929e3923f26a25007ff04dbf6fd2936/fc32b/timeline.webp 400w,\n/static/a929e3923f26a25007ff04dbf6fd2936/ccdb5/timeline.webp 800w,\n/static/a929e3923f26a25007ff04dbf6fd2936/9000d/timeline.webp 1200w,\n/static/a929e3923f26a25007ff04dbf6fd2936/e0075/timeline.webp 1600w,\n/static/a929e3923f26a25007ff04dbf6fd2936/30cf3/timeline.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of…","fields":{"slug":"/How-to-build-Instagram-in-React/"},"frontmatter":{"date":"November 17, 2020","title":"How to build Instagram in React","series":null,"description":"Instagram has such a simple, yet elegant design, and on top of that it's very modular. It's almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram's home page.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACIklEQVQoz1XRSU9TARiF4f4TF8aFcUXEhKRSqhBoi40XEBIWJoaC2DKWIlMKtKASOgFt6UB7O9wOdKBUKhQcEF0Yg1FiIJHEDSuX/obXihHj4tucxZNz8smiQoaIkManifGszsO03IHlpoundW7mapdYql8jqJEIaiUCQhx1dRvKGyrs2lWklhxRYf3iYi0ZZG6NyLxymUCHhO2BD/8jiXh/luzgFpvGbQrGEtmHRTxNUQyKUVyjXbwSrdh1M4h3MhXkH3YORirBmjrBhqnEbr7M3vI2RU+el+kdnoublEtlfMNhAo0pZrVmvKZ+DkIO8tNegs0p4m2Z/8GwkMJ+24/UXwksGSYepxkbimAaFzHonIyozJgUVlzKEOH2VWJDBkJGHaVJH8GGNKI2dQ5dTPZr43ReGybwRMRhS3JrJol6NoF6JESP4MRYNctgjYXYWI64K097QxOdNTW8KZQ52TklqysS0ab/NKygMvFuiu7qCbrkRgYa7BhUTtR1vfRoLNhVfvRVZmx9bt7v7+GLJFkwW1mcmefT0VfOfv7geP8b0b/g74aJ1jyj8nmEy32U9G7e3l/hkkKgvlHHRPUceqWFDTHG2a7EYT7Gh60UiWSOQnydF7lNvhydktNtVR70Z7osfW+DKcUizVe66ZX3YlZOoq+douO6ns6rAzjH1yh4XXxf93CSXOFzysthUeIg7MZhtfHx6JjXC+8IqRLEWjP8AkI+mbQThP0KAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/0e297124781de56c47db06278a84f787/bc8e0/instaBg.png","srcSet":"/static/0e297124781de56c47db06278a84f787/8ac63/instaBg.png 200w,\n/static/0e297124781de56c47db06278a84f787/3891b/instaBg.png 400w,\n/static/0e297124781de56c47db06278a84f787/bc8e0/instaBg.png 800w,\n/static/0e297124781de56c47db06278a84f787/6050d/instaBg.png 1200w,\n/static/0e297124781de56c47db06278a84f787/00405/instaBg.png 1600w,\n/static/0e297124781de56c47db06278a84f787/0e6e2/instaBg.png 1920w","srcWebp":"/static/0e297124781de56c47db06278a84f787/ccdb5/instaBg.webp","srcSetWebp":"/static/0e297124781de56c47db06278a84f787/6b183/instaBg.webp 200w,\n/static/0e297124781de56c47db06278a84f787/fc32b/instaBg.webp 400w,\n/static/0e297124781de56c47db06278a84f787/ccdb5/instaBg.webp 800w,\n/static/0e297124781de56c47db06278a84f787/9000d/instaBg.webp 1200w,\n/static/0e297124781de56c47db06278a84f787/e0075/instaBg.webp 1600w,\n/static/0e297124781de56c47db06278a84f787/30cf3/instaBg.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows…","fields":{"slug":"/How-to-build-Netflix's-Coming-Soon-page-in-React/"},"frontmatter":{"date":"November 02, 2020","title":"How to build Netflix's Coming Soon page in React","series":null,"description":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix. It has a few interesting functionalities. It's loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACN0lEQVQoz0WSW0/ScRjHeQGuPIUSKorNIycVkXkIBAHxFIniif8SIxAZGhMlNVNRcxppyyzSpq2pXbiu6qbr1itoXfUqegWffnjTxXd79uz7fL/PSVZlG6O+e1IgQIV1nDp3AKsUp9kToqZLotbhx9AXxBpNYYmsU+eU0DsmMLvGqWwbRGnyUKhzcUvfjdzgRtbincE0EsM8HKWx+wF32oYwD0XQi7i8fRilsZ9ymx/b7gWdLz6Tb/YSmYry/e0Osw8DFDX2omjquxbLCsuapXmm7YPsV+nYrjYgVehYUmuorLWSJ0jyrLso0kW20cX2RK6H480Uf67e82knibr1PsVN/RQLTlZcVmKXkAwW4go1PpUGvxAMlVZTYnAJYp9w7yVX46THF+TeaJACnYM3qXV+HT3nw2KYUlMv+Zqu/x0WCUd/bIXM2Tmnl1dkjk8JJzdJbh1w8vGcg8wZM6E5fl4ckVpaQG70IU0+42JhhlexcWxDCVRtAbFDJwVaJzJlcz+joQTx5RTRxCrxlS3Gwgn8M0keJ9cYeRQnLOK/P77wNbOPwZ6m1X3C5twGh0+fYHa/FPt+jbpdEp3akWXHytM4yK3v4katnZzqTuQNPahaBwW8KFoG6Rid5fe3S2ITcYq1i9S0p9FbNzC51mly7qHUzlNmilAoLi0rEsVlZg8KYx+3jQPXMHrCWMTrNPQHUd0dY3kjTXotRVGFm5vqaSwDu0xF91hcfcdI6JCcMh9ac4CaDi//AMH1OWZZXEErAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/7a22096a1108d65c7262e5302662aef1/bc8e0/netflix.png","srcSet":"/static/7a22096a1108d65c7262e5302662aef1/8ac63/netflix.png 200w,\n/static/7a22096a1108d65c7262e5302662aef1/3891b/netflix.png 400w,\n/static/7a22096a1108d65c7262e5302662aef1/bc8e0/netflix.png 800w,\n/static/7a22096a1108d65c7262e5302662aef1/6050d/netflix.png 1200w,\n/static/7a22096a1108d65c7262e5302662aef1/00405/netflix.png 1600w,\n/static/7a22096a1108d65c7262e5302662aef1/0e6e2/netflix.png 1920w","srcWebp":"/static/7a22096a1108d65c7262e5302662aef1/ccdb5/netflix.webp","srcSetWebp":"/static/7a22096a1108d65c7262e5302662aef1/6b183/netflix.webp 200w,\n/static/7a22096a1108d65c7262e5302662aef1/fc32b/netflix.webp 400w,\n/static/7a22096a1108d65c7262e5302662aef1/ccdb5/netflix.webp 800w,\n/static/7a22096a1108d65c7262e5302662aef1/9000d/netflix.webp 1200w,\n/static/7a22096a1108d65c7262e5302662aef1/e0075/netflix.webp 1600w,\n/static/7a22096a1108d65c7262e5302662aef1/30cf3/netflix.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own…","fields":{"slug":"/Easy-Dark-Mode-Switch-with-React-and-localStorage/"},"frontmatter":{"date":"September 12, 2020","title":"Easy Dark Mode Switch with React and localStorage","series":null,"description":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if you want to make one for your own React app you can easily do so with very little JavaScript code and a bit of custom CSS. ","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOElEQVQozy3Q20+SARzGcf6MDpum8b4vumVbJ0xJE21qpqV4gNpCFGUKCuIJQxQUms5Dp6WZZRZMw5IVtaKc1YWtg6sLr2y5ddG6aG2tLrv69r7UxXP7+f2eRyWU+hBrxxEbZ5C6ltD4nyL5E0g9MSRvHLFhBnWOE3VeJ2JBL6n7jOwQCkg7YEXQdaDObZfjRMhpRzjchkoTSKA5v4oUXEEafILYHyfTc48MVwSxPYxgmUIyhNDUjpGqd2OrqWIx5MJsamDXITvif0id7UCQo9J4Yqg7ltFafZyoLeN4VTGVZ6vRm8zU1egw1BVisBjJNE2w55iDoK2B9chVpoNB1NpWBK1dhuxJTK18KMkfpDfOkd90DqPNRGNPExWuTsqd3Vi6LJht1VTWN7GzaJDskk5udzi473Ey6fGxPatZRv+BCqbUVkmuBbnaAkenVsmfiFM09Rz9ZDwZXWABqTxAirzdwdNjGJ2XsFYYsGZrGfeF5IPX5H3b2C1XT9ZWQMEwingqxBHvLDrvLfL98+QNzFEwNE/WmRDpeg/1zousvHpNZDFGt91NwN7Mxsd3/Pj9i3A0QZoCKlsmwUIPQkk/QrFXTj9ixRDiyWGkmhHSzNMUtlxhY2mWTy+WSUQjPLwTZmvtEV8/POPzxlu+b76n2DRMyv4WxFwFLB1AKPMjmi4gWqYRW+eR3FEyemOk9D3GHZxh6+5lNh/c4ProCI6WPt4s3eTbyyg/1+P8+bKG2zfLtr3NSDonfwESF2PaMFiJFwAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/c84963620317fe9242f44fecd322767a/bc8e0/darkNew.png","srcSet":"/static/c84963620317fe9242f44fecd322767a/8ac63/darkNew.png 200w,\n/static/c84963620317fe9242f44fecd322767a/3891b/darkNew.png 400w,\n/static/c84963620317fe9242f44fecd322767a/bc8e0/darkNew.png 800w,\n/static/c84963620317fe9242f44fecd322767a/6050d/darkNew.png 1200w,\n/static/c84963620317fe9242f44fecd322767a/00405/darkNew.png 1600w,\n/static/c84963620317fe9242f44fecd322767a/0e6e2/darkNew.png 1920w","srcWebp":"/static/c84963620317fe9242f44fecd322767a/ccdb5/darkNew.webp","srcSetWebp":"/static/c84963620317fe9242f44fecd322767a/6b183/darkNew.webp 200w,\n/static/c84963620317fe9242f44fecd322767a/fc32b/darkNew.webp 400w,\n/static/c84963620317fe9242f44fecd322767a/ccdb5/darkNew.webp 800w,\n/static/c84963620317fe9242f44fecd322767a/9000d/darkNew.webp 1200w,\n/static/c84963620317fe9242f44fecd322767a/e0075/darkNew.webp 1600w,\n/static/c84963620317fe9242f44fecd322767a/30cf3/darkNew.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something…","fields":{"slug":"/Translating-React-components/"},"frontmatter":{"date":"August 16, 2020","title":"Translating React components","series":"How to Build a Multilingual Website with Gatsby and React","description":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something needs to be changed or added later on. Separating page components is good because of searching algorithms and SEO. There is also no code duplication, since page components are mostly plain text or markdown. Non-page components are a bit different.","tags":["web","react","multilingual"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQklEQVQozw2RW08SAACF+R0t7yKooaKSkSAqchW5CQgIgsgM8IIaK4TUNKWJMzU1ms6czK0tVy43W8tcbulDzhcfWm+99EO+eDpPZ+c75wgMdTosuijG4nr0zRZsHQFc7RGWw1lW++d5vXxE1veYNbWdV0o9wQYd/upGonUqRlU+RhRefHI3ZpECi7gDgUVqxqkdxmWMMLv4lqXwHC65l6Q2SCp2QMS/RVoX5LpPw6LGga3ZzLKqhzO3nYQxxoJvlZA6hq8thOtBAIGzvhOjzIE1fULf2hVjg5v01Xbi90wS3b9lZPsHU29O2MrmGZ3Zw7vxjUT+mq13FzyL75PxzBNVeQqUVqyFhgJTUTnd5U1UGHI0zVyiXvmFrlZNWD+E//kHBjJfiGc+sbJxSmb1ivjcGaHdG5zhHEl7mh3HE8YVfQxKtfRUyhA4Su4SksiQOvcxb97SMvcTtbAVrzVCYPs7wdw5AxuXTL2/5Wn+N0O5K2KZz4z7U8QbtcxYIkyp7OxE13C0PUIw3SBkQd5IjW2Xmugx7YU9usqkeIfmCb88J7Lzl0DigED6mInNG17s/SGZOiIfzJC6r0Ens2EtHLs+uc6IdgzBsCaMvsVGm8SEQSzHXiLEIGzGKVFgqmiip6YDa/k9LKUSTKJWsp4kp6FZvjpmmegaR1MmQ1elQCdSEnpgQ+B+aMM/mMEsUWK4U1rQdtxVUvqr6/EKxViKyxkQ1eKuFNNdVIW2ELLkTvDv4wWH04f4ZL3oCx6tWElvk5H/neVWa8MEErkAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/23e2c2b486f8733000f90e001c759f59/bc8e0/translating.png","srcSet":"/static/23e2c2b486f8733000f90e001c759f59/8ac63/translating.png 200w,\n/static/23e2c2b486f8733000f90e001c759f59/3891b/translating.png 400w,\n/static/23e2c2b486f8733000f90e001c759f59/bc8e0/translating.png 800w,\n/static/23e2c2b486f8733000f90e001c759f59/6050d/translating.png 1200w,\n/static/23e2c2b486f8733000f90e001c759f59/00405/translating.png 1600w,\n/static/23e2c2b486f8733000f90e001c759f59/0e6e2/translating.png 1920w","srcWebp":"/static/23e2c2b486f8733000f90e001c759f59/ccdb5/translating.webp","srcSetWebp":"/static/23e2c2b486f8733000f90e001c759f59/6b183/translating.webp 200w,\n/static/23e2c2b486f8733000f90e001c759f59/fc32b/translating.webp 400w,\n/static/23e2c2b486f8733000f90e001c759f59/ccdb5/translating.webp 800w,\n/static/23e2c2b486f8733000f90e001c759f59/9000d/translating.webp 1200w,\n/static/23e2c2b486f8733000f90e001c759f59/e0075/translating.webp 1600w,\n/static/23e2c2b486f8733000f90e001c759f59/30cf3/translating.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways…","fields":{"slug":"/Building-a-language-switch-component-in-React/"},"frontmatter":{"date":"August 14, 2020","title":"Building a language switch component in React","series":"How to Build a Multilingual Website with Gatsby and React","description":"You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways this can be done. The most common solution is adding a language selection tool in the form of multiple links or by using a drop-down list. In my case - I had to implement three different languages, so I went with the buttons approach.","tags":["web","react","multilingual"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACIUlEQVQozw2SWW8ScRTF+YK+qYm1Mamp1AfTVrtYrXYz2h0oLdKBsHegsk2GMsAMLVuBsnSAUoj2TV/8Cj7+/D+c3Htzck9uzj2WG3WDenqdjvKRZmabjnFMvxJmfH3GfTWMWQrRLwUwDYmu7sMsSPw2Ff70NEb1EKbupn8lcSP4ataBpaVs0cgd0c4dc1cKCjLCqCJzX/FxXw4KUZmuEaZthKhpEkrggHFZ4ud1kErWRyXtoKLsUM85aV7sYummvtFK71NNukmrMWwZAykeoBaQiMzKSM/TAlF801FOJuM4Xzrp5L/S15bpqIt0MmtidtDKuWgkV7HIPwLYlTyL+pDXFyXmVZUnUgp1z0/0jUzoVQxpUiYy40Z6KuOf36Cq7jPUdmknVmlE52idT1OOrpAPH2FZy9X5MPqHtfGXOa2GI5sgroe5CgfxvFAJTkUIWCN4pqLk7SvEXbOUEk7GlzbGxR3M1DqX3rcU/Uu0k1+wnKtJNhWDaMLLteZhoDv5pW9RPHERsoZRV13EF06JWXe5dE+QPHpGP3vAoHjKoGBjmF3iNj4vrpyjJ09gGRhehkaAOz0ifPBTK/hpaG5h8DHtvI1m4bvoxRdTm+j+GSKHVm7VzzyUt0XdY5haEN4tc+N/TN37CEtTOxGLpyIeZwwE2kK0a3jo6Q5uM5uYmU/UlEPKiT2M0DKyfZpe+j0PIl69vJ1xYYeR8o5B+DFmbIb/fcrZLzxbYNUAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/b4540dc780b9271335e7b48d0014a453/bc8e0/switch.png","srcSet":"/static/b4540dc780b9271335e7b48d0014a453/8ac63/switch.png 200w,\n/static/b4540dc780b9271335e7b48d0014a453/3891b/switch.png 400w,\n/static/b4540dc780b9271335e7b48d0014a453/bc8e0/switch.png 800w,\n/static/b4540dc780b9271335e7b48d0014a453/6050d/switch.png 1200w,\n/static/b4540dc780b9271335e7b48d0014a453/00405/switch.png 1600w,\n/static/b4540dc780b9271335e7b48d0014a453/0e6e2/switch.png 1920w","srcWebp":"/static/b4540dc780b9271335e7b48d0014a453/ccdb5/switch.webp","srcSetWebp":"/static/b4540dc780b9271335e7b48d0014a453/6b183/switch.webp 200w,\n/static/b4540dc780b9271335e7b48d0014a453/fc32b/switch.webp 400w,\n/static/b4540dc780b9271335e7b48d0014a453/ccdb5/switch.webp 800w,\n/static/b4540dc780b9271335e7b48d0014a453/9000d/switch.webp 1200w,\n/static/b4540dc780b9271335e7b48d0014a453/e0075/switch.webp 1600w,\n/static/b4540dc780b9271335e7b48d0014a453/30cf3/switch.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Before going ahead and making a multilingual website I would advise you to think about a few things: Do you even need one? Are you prepared…","fields":{"slug":"/Setting-up-page-structure-for-a-multilingual-website-in-Gatsby-and-React/"},"frontmatter":{"date":"August 05, 2020","title":"Setting up page structure for a multilingual website","series":"How to Build a Multilingual Website with Gatsby and React","description":"Before going ahead and making a multilingual website I would advise you to think about a few things. Do you even need one? Are you prepared to make multilingual content on your own? What is the best way to handle various translations? The first two points really matter only if you are making a personal project. If you were contracted to make a multilingual site for someone else then they are the ones who need to think about it.","tags":["gatsby","web","react","multilingual"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQklEQVQozx2S20/SYRjH+T+8aqv7buqmtWVunTbrQi0tEeWMCESgKSAnQdkPEVOzw4aWHW1WNoepLduymjmjUkRFREytbHNrXrSu+vTK1bNne9/n+Xw/7yvrNG1x07xDuzdFk3eSgGKJkDZLSL1MSJNG0n/DfPoNZQcfYjrzlqBmDV9NmlbVCr7KOXQnX+OSpwiIvql8FllP3RbdzmVs01GcmXac1+J0KTfxVC/Qpk7TUDLDqX0dFBVIFBaEsZckCKoX8VenaNFkaZbP0aJeFWczNJ6fQRbRruGtn8aRDGPbCBO76+Nvo4fbign6PZNsDRqYdBm5Z7EzbDUze93G+oCLdMzDQiyIpE7iUYgFNYs0lieQ+ZUZgTyP6c5TGiL32enogHgXc8ZOHrsnWIqoGKs3EdPZGbHWkZBMzHf7SPU08SXqI2IQcdW5fGS/KoNM0ueIGL/TZ0mSaa7iT5uczatexrSDPHLFxSUdU5KRuMPCVKuS544oDRUZHJeW8AqykHY17zUgYge1OWRd5g1Chl1Gnb3w7DD/hot44XiAU7HLE/cIize8jDfaGDJfZshopd/Sh774K7Vn34vBSQKaHD7liqhruOVJ4bB2HcmwTd+VD/zuPURGKhWvnhCSswSFDqlqDv/xAdT7JcoO3EJe9IqLR19y4cgIteemcQuyPW2tunXspR/3CH/Sadqm27zJgO0d0bpfhA0/COvFIl0Wqfoz7RXvaCkexXpiFI34OpXHxqkpHMNa+ilP5let5qtLscx/wqWxW+oo+ccAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/62314cdf6f6a00bf234dd2a5e569228a/bc8e0/structure.png","srcSet":"/static/62314cdf6f6a00bf234dd2a5e569228a/8ac63/structure.png 200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/3891b/structure.png 400w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/bc8e0/structure.png 800w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/6050d/structure.png 1200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/00405/structure.png 1600w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/0e6e2/structure.png 1920w","srcWebp":"/static/62314cdf6f6a00bf234dd2a5e569228a/ccdb5/structure.webp","srcSetWebp":"/static/62314cdf6f6a00bf234dd2a5e569228a/6b183/structure.webp 200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/fc32b/structure.webp 400w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/ccdb5/structure.webp 800w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/9000d/structure.webp 1200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/e0075/structure.webp 1600w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/30cf3/structure.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"I started working on this website in January, but things didn’t really work out the way I wanted to. It’s tough to have everything go…","fields":{"slug":"/How-to-finish-your-projects/"},"frontmatter":{"date":"June 01, 2020","title":"How to finish your projects","series":null,"description":"I started working on this website in January, but things didn't really work out the way I wanted to. It's tough to have everything go according to plan when you don't have a plan in the first place. I knew I wanted to redesign my old website which was was just one static page with a list of my projects. At the time I made it that was enough, but I wanted to extend it at some point to be a place where I can do and show more things, not necessarily related to web development. I guess this is that point.","tags":["web","productivity"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACS0lEQVQozx3My08SAACAcf6AOrVO3bLcbLpwurqIpsMXkiZalo9lOgaCCggBKqigkgQOS51IiuIDRMyxmooeNF1lc1ZuznRWHlyrS1uX1vWLOnz7bj/BGWEVZ4XVnMvUcPlWN4lSCwkSK7kqHwWNY0ia/Ug1fkp0k5S2TCKLV64PkF3Tx7XSNkQVnWTd7UR0u52sCguCCzk6hJVOivJrKEtOoy4jG49/idDGV2yhQ5zhTzgjx//vihzhXDhiYPEYmcZHcp6OSqOPDt8qNxUuMsrbEOTog5Qo+nGL01nvqGHFruDnt1NW358y5FliRWFgpb6JaHMXS/Va1h6omejwUqAeRXTHimPmFUMvd/E836ba6EVwqcJFiqieNVsdf/bD/Nqd5/vpCdG3J7gfR5nR2lhQtxGOg0GFkVitihH7OGLVKLImTxzbiWNvcM9vUax0IyhUjiC+P8CU18vv3RCf12cx941jmdnHN7TMhlzHC8VDokoTc4Y+FhtNDAzHKGoeIyVfh7ShH/tEjFrLGKkSPQK7PYy2xYe2L8yPLztEIyGSZQ4M45u4nINMq3TMyg1MK8z4258QUGpwP40hafRxRawhKVdLWomJtGIjqVIDAqvJj1I3SmV7hHv6QdJLWhCW92Ia28Yy9Y7O0B49oQN64z2aO8Dq3cIW+EChcpjEf2B+CxczG0i4oSIpT4PAYZul3RrENPyaHPkw568rEJZ10/psF/vMQRw7pGv2I47wEbqRbdSeZXqCe5i9mzR1hZC3BqgyB5AqB7laZOQvzSiRX7WIgfoAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/004be15f86e180f340923c653a6377a3/bc8e0/finish.png","srcSet":"/static/004be15f86e180f340923c653a6377a3/8ac63/finish.png 200w,\n/static/004be15f86e180f340923c653a6377a3/3891b/finish.png 400w,\n/static/004be15f86e180f340923c653a6377a3/bc8e0/finish.png 800w,\n/static/004be15f86e180f340923c653a6377a3/6050d/finish.png 1200w,\n/static/004be15f86e180f340923c653a6377a3/00405/finish.png 1600w,\n/static/004be15f86e180f340923c653a6377a3/0e6e2/finish.png 1920w","srcWebp":"/static/004be15f86e180f340923c653a6377a3/ccdb5/finish.webp","srcSetWebp":"/static/004be15f86e180f340923c653a6377a3/6b183/finish.webp 200w,\n/static/004be15f86e180f340923c653a6377a3/fc32b/finish.webp 400w,\n/static/004be15f86e180f340923c653a6377a3/ccdb5/finish.webp 800w,\n/static/004be15f86e180f340923c653a6377a3/9000d/finish.webp 1200w,\n/static/004be15f86e180f340923c653a6377a3/e0075/finish.webp 1600w,\n/static/004be15f86e180f340923c653a6377a3/30cf3/finish.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}}]}},"pageContext":{"postHistory":{},"group":[{"node":{"excerpt":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars…","fields":{"slug":"/Easy-Customizable-Star-Rating-Component-in-React/"},"frontmatter":{"date":"November 14, 2023","title":"Easy Customizable Star Rating Component in React","series":null,"description":"In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars that you use to rate stuff all over the internet? We will build those as a default use-case, but we will also add support for other text-based and emoji-based icons that you can use instead of little yellow stars.","tags":["web","react","component"],"featuredImage":{"id":"662e7074-1655-5b7b-b1b3-41c3277cbb65","publicURL":"/static/3fcc896f07936890607bd46ef93a75e1/rating.png","relativeDirectory":"Easy-Customizable-Star-Rating-Component-in-React","relativePath":"Easy-Customizable-Star-Rating-Component-in-React/rating.png"}}}},{"node":{"excerpt":"If you need a quick and simple solution for address search with autocomplete and geocoding this one is for you. To set up this project you…","fields":{"slug":"/Address-Search-With-React-and-Mapbox-API/"},"frontmatter":{"date":"November 09, 2023","title":"Address Search with React and Mapbox API","series":null,"description":"If you need a quick and simple solution for address search with autocomplete and geocoding this one is for you.","tags":["web","react","API"],"featuredImage":{"id":"ef200b89-aee2-5b99-81a2-7b8b0749b57b","publicURL":"/static/03b6810fd10b370c8aca9660ed18d330/address.png","relativeDirectory":"Address-Search-With-React-and-Mapbox-API","relativePath":"Address-Search-With-React-and-Mapbox-API/address.png"}}}},{"node":{"excerpt":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s…","fields":{"slug":"/Comic-Book-App-With-Marvel-API-and-React/"},"frontmatter":{"date":"November 02, 2023","title":"Comic Book App With Marvel API and React","series":null,"description":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s Superman cartoons. Which is sort of ridiculous since I grew up in the 90s, but I guess that's what our TV companies could afford at the time.","tags":["web","react","API"],"featuredImage":{"id":"4bc9cdf5-bdec-5969-b277-f3d1db641a0d","publicURL":"/static/9dc0ca21ac4035a31d6c67333000d87c/marvel.png","relativeDirectory":"Comic-Book-App-With-Marvel-API-and-React","relativePath":"Comic-Book-App-With-Marvel-API-and-React/marvel.png"}}}},{"node":{"excerpt":"Sometimes you gotta do what you gotta do. For quite a while I’ve had this idea of making a radio player or an app which you could use to…","fields":{"slug":"/Radio-Player-App-in-React/"},"frontmatter":{"date":"March 09, 2021","title":"Radio Player App in React","series":null,"description":"Sometimes you gotta do what you gotta do. For quite a while I've had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it.","tags":["web","react"],"featuredImage":{"id":"34795a8f-328a-5a70-b319-055e7e3f80c9","publicURL":"/static/089090f649eaebf75d83fee9b0c1db68/radio.png","relativeDirectory":"Radio-Player-App-in-React","relativePath":"Radio-Player-App-in-React/radio.png"}}}},{"node":{"excerpt":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g.…","fields":{"slug":"/Infinite-Pomodoro-App-in-React/"},"frontmatter":{"date":"February 21, 2021","title":"Infinite Pomodoro App in React","series":null,"description":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.","tags":["web","react"],"featuredImage":{"id":"5f17ed00-9d36-57fb-ae49-a730772af062","publicURL":"/static/0b5e120ab5fae721e3a3a1c4705557dd/pomodoro.png","relativeDirectory":"Infinite-Pomodoro-App-in-React","relativePath":"Infinite-Pomodoro-App-in-React/pomodoro.png"}}}},{"node":{"excerpt":"Getting a job in tech can be really hard, especially if it’s your first one. Every company prefers some experience, and how can you get…","fields":{"slug":"/How-to-get-a-job-with-no-experience/"},"frontmatter":{"date":"January 24, 2021","title":"How to get a job with no experience","series":null,"description":"Getting a job in tech can be really hard, especially if it's your first one. Every company prefers some experience, and how can you get experience if no one will take you? It's the tech version of the 'Chicken or Egg' question.","tags":["job","portfolio"],"featuredImage":{"id":"5d45bd95-f508-567e-a469-64aa4e547a33","publicURL":"/static/d198c50e0f78b5205c213040941fa7f2/indexCode.png","relativeDirectory":"How-to-get-a-job-with-no-experience","relativePath":"How-to-get-a-job-with-no-experience/indexCode.png"}}}}],"pathPrefix":"/blog","first":true,"last":false,"index":1,"pageCount":4,"additionalContext":{"postHistory":{}}}}}